import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import dynamic from "next/dynamic";
import React from "react";
import { useTranslation } from "react-i18next";

const PersonalData = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/PersonalData.widget")
);
const PlacingOrder = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/PlacingOrder.widget")
);

const CheckoutPage: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className={`${globalContainer} pt-14 pb-16`}>
      <div className="flex justify-between flex-row gap-x-19">
        <div className="flex flex-col max-w-md w-full">
          <TextAtom
            type={TextAtomEnum.enum_h1}
            className="mb-11 text-textColor font-semibold"
          >
            {t("CheckoutPage.titlePersonal")}
          </TextAtom>
          <PersonalData t={t} />
        </div>
        <div className="flex flex-col max-w-lg">
          <h1 className="text-h1 text-textColor font-semibold">
            {t("CheckoutPage.titleBasket")}
          </h1>
          <PlacingOrder t={t} />
        </div>
      </div>
    </div>
  );
};
export default CheckoutPage;
